<template>
  <div class="goods">
    <div class="menu-wapper" ref="menu">
      <ul>
        <li class="menu-item" @click="selectItem(index)" v-for="(item, index) of goods" :key="item.name" :class="{'current': currentIndex===index}">
          <span class="text border-bottom">
            <span class="icon" v-show="item.type > 0" :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="goods-wapper" ref="goods">
      <ul>
        <li class="food-list food-hook" ref="hook" v-for="item of goods" :key="item.name">
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li class="food-item" @click="selected(food)" v-for="food of item.foods" :key="food.name">
              <div class="icon">
                <img :src="food.icon" width="57" height="57" :alt="food.name">
              </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="desc">{{food.description}}</p>
                <div class="extra">
                  <span class="count">月售{{food.sellCount}}份</span>
                  <span>好评率{{food.rating}}%</span>
                </div>
                <div class="price">
                  <span class="now"><span class="money">￥</span>{{food.price}}</span>
                  <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                </div>
                <div class="control-wapper">
                  <cart-control @add="handleAdd" :food="food"></cart-control>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <shop-cart @add="handleAdd" ref="shopcart" @hideDetail="hideDetail" :selectFoods="selectFoods" :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice"></shop-cart>
    <transition enter-active-class="animated fadeInRight"  leave-active-class="animated fadeOutRight">
      <food-detail @touchstart.native.prevent="touchStart" @touchend.native.prevent="touchEnd" v-show="showDetail" @add="handleAdd" :showDetail="showDetail" @hideDetail="hideDetail" ref="food" :food="selectedFood"></food-detail>
    </transition>
  </div>
</template>
<script>
import BScoll from 'better-scroll'
import ShopCart from 'pages/shopcart/ShopCart'
import CartControl from 'common/cartcontrol/CartControl'
import FoodDetail from './components/FoodDetail'
import FadeAnimate from 'common/fade/FadeAnimate'

export default {
  name: 'SellGoods',
  components: {
    ShopCart,
    CartControl,
    FoodDetail,
    FadeAnimate
  },
  props: {
    seller: {
      type: Object,
      default () {
        return {}
      }
    },
    ratings: {
      type: Array,
      default () {
        return []
      }
    },
    goods: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      listHeight: [],
      scrollY: 0,
      selectedFood: {},
      showDetail: false
    }
  },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  },
  mounted () {
    this.initScroll()
    setTimeout(this.calcHeight, 500)
  },
  computed: {
    currentIndex () {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i]
        let height2 = this.listHeight[i + 1]
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          return i
        }
      }
      return 0
    },
    selectFoods () {
      let foods = []
      this.goods.forEach((good) => {
        good.foods.forEach((food) => {
          if (food.count) {
            foods.push(food)
          }
        })
      })
      return foods
    }
  },
  watch: {
    scrollY () {
      let current = this.$refs.menu.getElementsByClassName('current')[0]
      if (this.currentIndex > 5 || this.currentIndex < 3) {
        this.menuScroll.scrollToElement(current, 300)
      }
    }
  },
  methods: {
    initScroll () {
      this.menuScroll = new BScoll(this.$refs.menu, {
        click: true
      })
      this.goodScroll = new BScoll(this.$refs.goods, {
        probeType: 3,
        click: true
      })
      this.goodScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y))
      })
    },
    selectItem (key) {
      this.curIndex = key
      let list = this.$refs.goods.getElementsByClassName('food-hook')
      let element = list[key]
      this.goodScroll.scrollToElement(element, 300)
    },
    calcHeight () {
      let list = this.$refs.goods.getElementsByClassName('food-hook')
      let height = 0
      this.listHeight.push(height)
      for (let i = 0; i < list.length; i++) {
        let item = list[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    },
    handleAdd (target) {
      setTimeout(() => {
        this.$refs.shopcart.drop(target)
      }, 50)
    },
    selected (food) {
      this.selectedFood = food
      this.showDetail = true
    },
    hideDetail () {
      this.showDetail = false
    },
    touchStart (e) {
      this.slideStart = e.touches[0].clientX
    },
    touchEnd (e) {
      this.slideEnd = e.changedTouches[0].clientX
      let slideLen = this.slideEnd - this.slideStart
      if (slideLen > 80) {
        this.hideDetail()
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "~styles/mixin.styl"
.goods
  display flex
  position absolute
  top 3.55rem
  bottom 0
  padding-bottom 0.92rem
  width 100%
  overflow hidden
  .menu-wapper
    flex 0 0 1.6rem
    width 1.6rem
    background-color #f3f5f7
    .menu-item
      display table
      height 1.08rem
      width 1.6rem
      line-height .28rem
      .icon
        vertical-align top
        display inline-block
        width .24rem
        height .24rem
        margin-right .04rem
        background-size .24rem .24rem
        background-repeat no-repeat
        &.decrease
          bg-image('img/decrease_3')
        &.discount
          bg-image('img/discount_3')
        &.guarantee
          bg-image('img/guarantee_3')
        &.invoice
          bg-image('img/invoice_3')
        &.special
          bg-image('img/special_3')
      .border-bottom
        &:after
          border rgba(7, 17, 27, 0.1)
        &:last-child
          border 0
      .text
        font-size .24rem
        display table-cell
        vertical-align middle
        padding 0 .24rem
    .current
      position relative
      margin-top -0.02rem
      background white
      font-size .24rem
      font-weight 700
      line-height .28rem
      .text
        &.border-bottom
          border none
  .goods-wapper
    flex 1
    .food-list
      &:last-child
        border none
      .title
        padding-left .28rem
        height .52rem
        line-height .52rem
        color rgb(147, 153, 159)
        font-size .24rem
        border-left .04rem solid #d9dde1
        background-color #f3f5f7
      .food-item
        position relative
        display flex
        margin .36rem
        padding-bottom .36rem
        border-bottom 0.01rem solid rgba(7, 17, 27, 0.1)
        &:last-child
          border none
          margin-bottom 0
        .icon
          flex 0 0 1.14rem
          margin-right .2rem
          width 1.14rem
        .content
          flex 1
          .name
            margin .04rem 0 .16rem 0
            height .28rem
            line-height .28rem
            font-size .28rem
            color rgb(7, 17, 27)
            ellipsis()
          .desc,.extra
            line-height .26rem
            font-size .2rem
            color rgb(147, 153, 159)
          .desc
            margin-bottom .16rem
          .extra
            .count
              margin-right .24rem
          .price
            font-weight 700
            line-height .48rem
            .now
              margin-right .16rem
              font-size .3rem
              color rgb(240, 20, 20)
              .money
                font-size .2rem
                font-weight 200
            .old
              font-size .2rem
              text-decoration line-through
              color rgb(147, 153, 159)
          .control-wapper
            position absolute
            right -0.1rem
            bottom .24rem
</style>
